<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
        <p>{{count}}</p>
        <p>{{count + 1}}</p>
        <p>{{bool?"yes":"no"}}</p>
    </div>
</body>
<script>
    // 注意:
    // 1. 挂载的数据只能在挂载的元素中使用  => 作用域
    // 2. 一般情况下,一个页面建议只有一个根实例(vue实例)  (单页面应用做准备)
    // 3. 一般情况下,如果选项配置(options)中没有template属性,默认使用挂载元素的outerHTML作为编译的模板,如果设置了template属性,将会以template属性的值作为编译模板
    // 4. 单个根元素(一个模板中只能有一个根元素 => 根实例/组件 =>V2要求,V3可以有多个同级元素作为根元素)
    // 5. 默认情况下,可以通过选项配置(options)中el属性设置挂载的元素,  如果选项配置中没有设置,可以通过 $mount方法设置

    var vm = new Vue({
        // el: "#app",
        data: {
            message: "hello world",
            count: 100,
            bool: true,
        },
        // template:`<h2>{{message}}</h2>`
    })

    console.log(vm); // Vue实例 (实例化对象   -> 都可以通过原型属性[[Prototype]]访问构造函数的原型对象 Vue.prototype)

    vm.$mount("#app");









</script>

</html>